<template>
  <div class="header" flex="main:justify cross:center box:justify">
    <div class="logo" flex="main:justify cross:center">
      <svg-icon icon-class="dashboard" style="margin-right:15px" />
      <p>ZTSmart综合管理系统</p>
    </div>
    <el-menu
      ref="elMenu"
      style="border-bottom:none"
      :default-active="defaultActive"
      mode="horizontal"
      active-text-color="#409EFF"
      background-color="#0E123F"
      text-color="#fff"
      @select="handleSelect"
    >
      <nav-item
        v-for="(item, index) in navList"
        :key="index + 'a'"
        :item="item"
      >{{ item.name }}</nav-item>
    </el-menu>
    <div class="useinfo" @click="$router.push('/index')">
      <!-- <svg-icon icon-class="peoples" @click="handleClick" /> -->
      <el-link type="primary">ZTSmart后台管理</el-link>
    </div>
  </div>
</template>
<script>
import { navList } from '@/const'
import navItem from './Item'
export default {
  components: {
    navItem
  },
  data() {
    return {
      // logoSrc: require('@/assets/ixx_logo.png'),
      navList
    }
  },
  computed: {
    defaultActive() {
      return this.$route.path
    }
  },
  created() {
    this.$EventBus.$on('navInit', () => {
      (this.$refs.elMenu || {}).activeIndex = this.defaultActive
    })
  },
  methods: {
    handleSelect(key, keyPath) {
      const activeItem = keyPath.reduce((prev, curr) => {
        const found = prev.find(item => item.path === curr)
        return found.children || found
      }, this.navList)
      if (activeItem.isPop) {
        this.$EventBus.$emit('openDialog', activeItem)
      } else {
        this.$router.push(key)
      }
    },
    handleClick() {
      location.href = 'http://192.168.9.82/index'
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  background: #0E123F;
  padding: 0 12px;
  & > .logo {
    font-size: 24px;
    color: #fff;
    margin-right: 100px;
  }
  & > .useinfo {
    // font-size: 24px;
    color: #fff;
  }
}
</style>
